<template>
    <el-row>
        <el-col>
            <el-card>
                <el-form :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.UserName" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.Password" />
                    </el-form-item>
                    <el-form-item lable="头像">
                        <el-upload class="avatar-uploader" :action="fromAction" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="存储方式">
                        <el-radio-group @change="changeMode" v-model="form.UploadModel" class="ml-4">
                            <el-radio label="1" size="large">本地上传</el-radio>
                            <el-radio label="2" size="large">七牛云</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card>
                <p style="color:red">注意事项</p>
                <p>当前不支持短信验证相关功能，请谨慎改密码</p>
                <p>单机部署可以选择本地文件，多服务器(分布式)负载请上传云</p>
                <p>目前内置七牛云，测试阶段使用</p>
                <p>......</p>
            </el-card>
        </el-col>
    </el-row>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, UploadProps } from 'element-plus';
import { editUserFile } from '../../http/index'
import store from '../../store';
import router from '../../router';
import { FormatToken } from '../../tools';
const form = reactive({
    Id: FormatToken(store().token)?.Id,
    UserName: FormatToken(store().token)?.UserName,
    Password: "",
    UploadModel: FormatToken(store().token)?.UploadModel,
    Image: FormatToken(store().token)?.Image
})
const imageUrl = ref(form.Image)
const fromAction = ref("")
const changeMode = () => {
    fromAction.value = "/api/File/UploadFile?model=" + form.UploadModel
}
onMounted(() => { fromAction.value = "/api/File/UploadFile?model=" + form.UploadModel })
//上传前的校验
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
    if (!(rawFile.type == "image/png" || rawFile.type == "image/jpeg")) {
        ElMessage.error("Avator picture must be jpg format!")
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("Avator picture size can not exceed 2MB");
        return false
    }
    return true
}

//上传
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
    //根据不同的上传方式设置不同的路径
    if (form.UploadModel == 1) {
        form.Image = `http://localhost:5068/static/${response.Result}`
    }
    else {
        form.Image = `http://rzj9n8iq3.hn-bkt.clouddn.com/${response.Result}`
    }
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const onSubmit = async () => {
    var res = await editUserFile(form)
    if(res) ElMessage.success("修改成功, 3秒后退出系统重新登录!!!")
    //退出
    let count = 3
    let myTime = setInterval(function () {
        if (count <= 0) {
            store().reset()
            router.push({ path: "/login" })
            clearInterval(myTime)
        } else {
            ElMessage.warning(`${count}秒后退出系统`)
            count--
        }
    }, 1000)
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 179px;
    height: 179px;
    text-align: center;
}

.el-card {
    float: left;
    width: 500px;
    margin-left: 20px;
}
</style>